<template>
  <div class="postPublish">
    <!-- 这是路径导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item
        ><a href="javascript:;">文章管理</a></el-breadcrumb-item
      >
      <el-breadcrumb-item>文章发布</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片试图 -->
    <el-card class="box-card" style="margin-top: 20px">
      <el-form ref="postForm" :model="postForm" label-width="80px">
        <!-- 标题 -->
        <el-form-item label="标题">
          <el-input v-model="postForm.title"></el-input>
        </el-form-item>
        <!-- 类型 -->
        <el-form-item label="类型">
          <el-radio-group v-model="postForm.type">
            <el-radio :label="1" cheacked>文章</el-radio>
            <el-radio :label="2">视频</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 内容 -->
        <el-form-item label="标题">
          <VueEditor
            :config="config"
            ref="vueEditor"
            v-if="postForm.type == 1"
          />
          <el-upload
            class="upload-demo"
            :headers="getToken()"
            v-if="postForm.type == 2"
            :on-success="onsuccess"
            :before-upload="beforeupload"
            :action="baseURL + '/upload'"
            :file-list="fileList"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传视频文件</div>
          </el-upload>
        </el-form-item>

        <!-- 栏目 -->

        <!-- 封面 -->
      </el-form>
      <el-button type="success" @click="publishPost">发布文章</el-button>
    </el-card>
  </div>
</template>

<script>
import VueEditor from "vue-word-editor";
import "quill/dist/quill.snow.css";
import axios from "@/utils/myaxios.js";
export default {
  components: {
    VueEditor,
  },
  data() {
    return {
      postForm: {
        baseURL: axios.defaults.baseURL,
        fileType: ["video/avi", "video/mp4"],
        title: "",
        content: "",
        categories: [],
        cover: [], //id
        type: 1, //文章或者视频后台给的 1 或者 2
      },
      config: {
        // 上传图片的配置
        uploadImage: {
          url: axios.defaults.baseURL + "/upload", //这是文章上传的服务器端处理路径
          name: "file",
          headers: this.getToken(),
          // res是结果，insert方法会把内容注入到编辑器中，res.data.url是资源地址
          uploadSuccess(res, insert) {
            //这是文件上传后的回调
            insert(axios.defaults.baseURL + res.data.data.url);
          },
        },

        // 上传视频的配置
        uploadVideo: {
          url: axios.defaults.baseURL + "/upload",
          name: "file",
          uploadSuccess(res, insert) {
            insert(axios.defaults.baseURL + res.data.url);
          },
        },
      },
    };
  },
  methods: {
    beforeupload(file) {
      console.log(file);
      if (this.fileType.indexOf(file.type) == -1) {
        alert("类型不对");
        return false;
      } else if (file.size / 1024 / 1024 > 80) {
        alert("太大了");
        return false;
      }
    },
    // 视频上传成功之后的钩子
    onsuccess(response, file, fileList) {
      console.log(response, file, fileList);
      if (response.message == "文件上传成功") {
        // 类型为视频的时候，content中存储的内容就是视频在服务器中的全路径
        this.postForm.content = axios.defaults.baseURL + response.data.url;
      }
    },
    getToken() {
      return {
        Authorization: JSON.parse(localStorage.getItem("heima_56")).token,
      };
    },
    publishPost() {
      if (this.postForm.type == 1) {
        this.postForm.content = this.$refs.VueEditor.editor.root.innerHTML;
      }
      console.log(this.postForm);
    },
  },
};
</script>

<style>
</style>